<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Repeater Paging" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <table>
        <tr>
            <td style="text-align:left">
                <AjaxData:Repeater ID="Repeater1" runat="server" ItemDataBoundEvent="onItemDataBound">
                    <HeaderTemplate>
                        <h3>Customer Information</h3>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <h4>
                            <span id="spnCustomerName"></span>
                        </h4>
                        <table border="0">
                            <tr>
                                <td><strong>Contact:</strong> </td>
                                <td colspan="3" style="width:100%"><span id="spnContact"></span>&nbsp;(<span id="spnTitle"></span>)</td>
                            </tr>
                            <tr>
                                <td colspan="4"><span id="spnAddress"></span></td>
                            </tr>
                            <tr>
                                <td colspan="4"><span id="spnCity"></span>&nbsp;<span id="spnRegion"></span>&nbsp;<span id="spnPostalCode"></span></td>
                            </tr>
                            <tr>
                                <td colspan="4"><span id="spnCountry"></span></td>
                            </tr>
                            <tr>
                                <td>
                                    <strong>Phone:</strong>
                                </td>
                                <td colspan="3" style="width:100%">
                                    <span id="spnPhone"></span>
                                </td>
                            </tr>
                        </table>
                    </ItemTemplate>
                    <SeparatorTemplate>
                        <hr />
                    </SeparatorTemplate>
                </AjaxData:Repeater>
            </td>
        </tr>
        <tr>
            <td style="text-align:right">
                <AjaxData:Pager ID="Pager1" PageSize="5" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage" OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged"></AjaxData:Pager>
            </td>
        </tr>
    </table>
    <script type="text/javascript">

        var _repeater;
        var _pager;

        function pageLoad(sender, e)
        {
            _repeater = Repeater1;
            _pager = Pager1;
            loadCustomers();
        }

        function loadCustomers()
        {
            var startIndex = (_pager.get_pageIndex() * _pager.get_pageSize());

            DataService.GetCustomerList(startIndex, _pager.get_pageSize(), '', '', onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _pager.set_recordCount(result.Total);
            _repeater.set_dataSource(result.Rows);
            _repeater.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var customer = item.get_dataItem();

                var spnCustomerName = item.findControl('spnCustomerName');
                var spnTitle = item.findControl('spnTitle');
                var spnContact = item.findControl('spnContact');
                var spnAddress = item.findControl('spnAddress');
                var spnCity = item.findControl('spnCity');
                var spnRegion = item.findControl('spnRegion');
                var spnPostalCode = item.findControl('spnPostalCode');
                var spnCountry = item.findControl('spnCountry');
                var spnPhone = item.findControl('spnPhone');

                setText(spnCustomerName, customer.Company);

                setText(spnTitle, customer.ContactTitle);
                setText(spnContact, customer.ContactName);

                setText(spnAddress, customer.Address);
                setText(spnCity, customer.City);
                setText(spnRegion, customer.Region);
                setText(spnPostalCode, customer.PostalCode);
                setText(spnCountry, customer.Country);

                setText(spnPhone, customer.Phone);
            }
        }

        function pageChanged(sender, e)
        {
            _pager.set_pageIndex(e.get_newPageIndex());
            loadCustomers();
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>